<template>
	<view class="index-page">
		<view class="header" :style="{'paddingTop':heightConfig.navBarPaddingTop+'px'}">
			<view class="logo">本维美logo</view>
			<view class="search">
				<u-search height='90rpx' searchIconColor="#4b3138" bgColor="#fee7eb" :showAction="false"
					placeholder="请输入搜索" shape="square" margin="0 15rpx 0 0 " v-model="keyword"
					@search="searchFocus"></u-search>
				<view class="icon" @click="pageTo('/subPages/mine/myPoints')">
					<image class="image" src="../static/images/home/singIn.png" mode=""></image>
				</view>
			</view>
			<view class="advertisement">
				<image class="img" src="../static/images/home/Snipaste_2024-11-18_16-14-28.png" mode="">
				</image>
			</view>
		</view>
		<view style="width:100%;height:85px;background:#fff;"></view>
		<view class="srcroll">
			<view class="classification">
				<view v-for="(item,index) in classification" @click="classificaPageTo(item.url,index)" class="item"
					:key="index">
					<view class="iconImage">
						<image :src="item.image" mode=""></image>
					</view>
					<view class="text">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="special">
				<view v-for="(item,index) in special" :style="{'margin':index==1?'0 20rpx':'0'}" class="item"
					:key="index">
					<view class="iconImage">
						<image :src="item.image" mode=""></image>
					</view>
					<view class="name">
						{{item.name}}
					</view>
					<view class="text">
						{{item.txt}}
					</view>
				</view>
			</view>
			<view class="title">推荐产品</view>
			<scroll-view :style="{ height: mainHeight }" scroll-y class="scrollView">
				<view class="recommend">
					<view v-for="(item, index) in recommend" :key="index"
						@click="pageTo('/subPages/details/goodDetail')" class="recommendi">
						<view class="image">
							<image :src="item.image" mode=""></image>
						</view>
						<view class="name">{{item.name}}</view>
						<view class="hearts" :class="item.hears ? 'heart':'heartActive'"
							@click.stop="ClickHeart(index)"></view>
						<view class="leftRight">
							<view class="left">
								<view class="introduce">
									<span>净含量：{{item.ml}}</span>
									<span>销量：{{item.salesVolume}}</span>
								</view>
								<view class="price">
									{{'￥'+ item.price}}
								</view>
								<view class="VipPrice">
									<view class="vip">
										<!-- 会员价 -->
									</view>
									<span>￥{{item.vipPrice}}</span>
								</view>
							</view>
							<view class="right">
								<u-icon name="plus" color="#fff" size="15"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<ShoppingCart class="ShoppingCart"></ShoppingCart>
	</view>
</template>

<script>
	import ShoppingCart from "../subPages/ShoppingCart/index.vue"
	export default {
		name: 'Index',
		components: {
			ShoppingCart
		},
		data() {
			return {
				heightConfig: {},
				keyword: '',
				classification: [{
						name: '产品中心',
						image: '../static/images/home/chanpin.png',
						url: '/pages/store'
					},
					{
						name: '会员好礼',
						image: '../static/images/home/huiyuan.png',
						url: '/subPages/classification/memberGift'
					},
					{
						name: '素材中心',
						image: '../static/images/home/sucai.png',
						url: '/subPages/mine/pointsMall'
					},
					{
						name: '我的会员',
						image: '../static/images/home/wode.png',
						url: '/pages/memberCenter/index'
					},
				],
				special: [{
					name: '复购专区',
					txt: '精品好货常回选',
					image: '../static/images/home/Snipaste_2024-11-18_16-14-45.png'
				}, {
					name: '会员中心',
					txt: '会员专享特权区',
					image: '../static/images/home/Snipaste_2024-11-18_16-14-45.png'
				}, {
					name: '公司介绍',
					txt: '企业风采简介集',
					image: '../static/images/home/Snipaste_2024-11-18_16-14-45.png'
				}],
				mainHeight: '',
				recommend: [{
					image: '../static/images/home/Snipaste_2024-11-18_16-14-45.png',
					name: '淡斑护肤品套装',
					ml: '30ml',
					salesVolume: 6,
					price: 949,
					vipPrice: 888,
					hears: true
				}, {
					image: '../static/images/home/Snipaste_2024-11-18_16-14-45.png',
					name: '淡斑护肤品套装',
					ml: '30ml',
					salesVolume: 6,
					price: 949,
					vipPrice: 888,
					hears: true

				}, {
					image: '../static/images/home/Snipaste_2024-11-18_16-14-45.png',
					name: '淡斑护肤品套装',
					ml: '30ml',
					salesVolume: 6,
					price: 949,
					vipPrice: 888,
					hears: true
				}, {
					image: '../static/images/home/Snipaste_2024-11-18_16-14-45.png',
					name: '淡斑护肤品套装',
					ml: '30ml',
					salesVolume: 6,
					price: 949,
					vipPrice: 888,
					hears: true
				}, {
					image: '../static/images/home/Snipaste_2024-11-18_16-14-45.png',
					name: '淡斑护肤品套装',
					ml: '30ml',
					salesVolume: 6,
					price: 949,
					vipPrice: 888,
					hears: true
				}, {
					image: '../static/images/home/Snipaste_2024-11-18_16-14-45.png',
					name: '淡斑护肤品套装',
					ml: '30ml',
					salesVolume: 6,
					price: 949,
					vipPrice: 888,
					hears: true
				}, {
					image: '../static/images/home/Snipaste_2024-11-18_16-14-45.png',
					name: '淡斑护肤品套装',
					ml: '30ml',
					salesVolume: 6,
					price: 949,
					vipPrice: 888,
					hears: true
				}]
			}
		},
		async onLoad() {
			this.mainHeight = this.$store.getters.heightData.noTabMainHeight
			this.heightConfig = this.$store.getters.heightData
		},
		async onShow() {

		},
		onReady() {},
		methods: {
			pageTo(url) {
				if (url) {
					uni.navigateTo({
						url: url
					})
				} else {
					console.error('没路由');
				}
			},
			classificaPageTo(url, index) {
				if (index == 0) {
					uni.switchTab({
						url: url
					})
				} else {
					uni.navigateTo({
						url: url
					})
				}
			},
			searchFocus() {
				// const params = encodeURIComponent(JSON.stringify(this.$store.getters.cityData));
				// this.$tab.navigateTo(`/subPages/home/searchShop?params=${params}`)
			},
			ClickHeart(i) {
				this.recommend[i].hears = !this.recommend[i].hears
			}
		}
	}
</script>
<style lang="less" scoped>
	.index-page {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		flex-direction: column;
		background-color: #fff;

		.ShoppingCart {
			width: 120rpx;
			height: 120rpx;
			position: fixed;
			bottom: 6%;
			right: 6%;
			z-index: 99;
		}


		.header {
			width: 100%;
			padding: 0 28rpx;
			height: 35%;
			background: linear-gradient(to right, #FCE5D8, #FEB7D5);


			.logo {
				background-color: #fee7eb;
				border-radius: 20px;
				width: 200rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
			}

			.search {
				width: 100%;
				height: 160rpx;
				padding: 28rpx 0;
				display: flex;
				justify-content: center;
				align-items: center;

				.icon {
					width: 100rpx;
					height: 95rpx;
					display: flex;
					justify-content: end;

					.image {
						width: 98%;
						height: 100%;
					}
				}
			}

		}

		.advertisement {
			margin-top: 10rpx;
			width: 100%;
			height: 290rpx;
			display: flex;
			align-items: center;
			flex-direction: column;
			position: relative;

			.img {
				width: 100%;
				height: 100%;
				border-radius: 8px;
			}
		}

		.classification {
			width: 100%;
			height: 160rpx;
			margin: 15rpx 0;
			display: flex;
			justify-content: center;

			.item {
				width: 25%;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				color: #000;

				.iconImage {
					width: 60%;
					height: 65%;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

		}

		.special {
			width: 100%;
			height: 320rpx;
			margin-top: 10rpx;
			display: flex;
			justify-content: center;

			.item {
				width: 32%;
				height: 100%;
				border-radius: 20px;
				padding: 20rpx;
				background-color: #f8f8f8;
				// box-sizing: border-box;

				.iconImage {
					width: 100%;
					height: 180rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 25px;
					}
				}

				.name {
					color: #000;
					font-weight: 600;
					line-height: 60rpx;
				}

				.text {
					font-size: 25rpx;
					color: #858585;
				}
			}


		}

		.title {
			font-weight: 600;
			font-size: 18px;
			margin: 25rpx 8rpx;
		}

		.srcroll {
			width: 100%;
			height: 100%;
			overflow-y: auto;
			padding: 0 28rpx;
		}

		.scrollView {
			width: 100%;

			// height: 100%;
			.recommend {
				width: 100%;
				height: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
			}

			.recommendi {
				width: 48%;
				margin: 20rpx 0;
				position: relative;

				.hearts {
					position: absolute;
					top: 40rpx;
					right: 40rpx;
					width: 60rpx;
					height: 60rpx;
				}

				.heart {
					background: url('../static/images/home/heart.png') no-repeat;
					background-size: 100%;
				}

				.heartActive {
					background: url('../static/images/home/heart_active.png') no-repeat;
					background-size: 100%;
				}

				.image {
					width: 100%;
					height: 335rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 20%;
					}
				}

				.name {
					width: 100%;
					height: 55rpx;
					font-size: 28rpx;
					line-height: 55rpx;
					font-weight: 600;
				}

				.leftRight {
					display: flex;
					position: relative;

					.left {
						width: calc(100% - 20rpx);

						.text {
							color: #858585;
						}

						.introduce {
							width: 100%;
							font-size: 26rpx;
							display: flex;
							justify-content: space-between;

							span {
								display: inline-block;
							}
						}

						.price {
							width: 100%;
							height: 60rpx;
							font-size: 35rpx;
							line-height: 60rpx;
							font-weight: 600;
						}

						.VipPrice {
							width: 180rpx;
							height: 40rpx;
							background-color: #FEE6C3;
							border-radius: 3px;
							display: flex;

							.vip {
								width: 50%;
								height: 100%;
								background: url('../static/images/home/vip.png') no-repeat;
								background-size: 100% 100%;
								display: initial-block;
							}

							span {
								text-align: center;
							}
						}
					}

					.right {
						position: absolute;
						width: 20px;
						height: 20px;
						background-color: #FF4254;
						border-radius: 3px;
						bottom: 0;
						right: 2px;
						display: flex;
						align-items: center;
						justify-content: center;
					}

				}

			}
		}
	}
</style>